<template>
    <div style="padding:20px 30px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/project/projectList'}">项目管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/project/projectList'}">项目列表</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/project/projectList/detailProject/'+id}">{{name}}</el-breadcrumb-item>
            <el-breadcrumb-item>查看地图</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="mapContainer">
            <div id="mapContainer"></div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
       name:this.$route.query.name,
       id:this.$route.params.id,
       marker:null,
       loca:{
           location:{
               R:"",
               Q:""
           }
       },
       map:null,
    }
  },
  created() {
    //   121.31891 31.193987
      this.loca.location.R=this.$route.query.lng;
      this.loca.location.Q=this.$route.query.lat;
  },
  mounted() {
     this.init();
  },
  methods: {
      //初始化代码
      init(){
          this.map = new AMap.Map("mapContainer", {
              resizeEnable: true,
              center: ['118.397428', '39.90923'],//地图中心点
              zoom: 11,//地图显示的缩放级别
              keyboardEnable: false
          });
          // var marker = null;
          AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],()=>{
              var autoOptions = {
                  city: "北京", //城市，默认全国
                  input: "keyword"//使用联想输入的input的id
              };
              let autocomplete= new AMap.Autocomplete(autoOptions);
              var placeSearch = new AMap.PlaceSearch({
                  city:'北京',
                  map:this.map
              });

            this.addMarker();
            this.map.setZoomAndCenter(14, [this.loca.location.R,this.loca.location.Q]); //同时设置地图层级与中心点
          });

      },
       // 实例化点标记
      addMarker() {
          this.clearMarker();
          this.marker = new AMap.Marker({
              icon: "",
              position: [this.loca.location.R,this.loca.location.Q],
              offset: new AMap.Pixel(-13, -30)
          });
          this.marker.setMap(this.map);
      },
      // 清除 marker
      clearMarker() {
          if (this.marker) {
              this.marker.setMap(null);
              this.marker = null;
          }
      },

      
  }
}
</script>
<style>
  .mapContainer {
    float: left;
    width:100%;
    height:600px;
    position:relative;
    margin-top:30px;
    z-index:1;
  }
  #mapContainer {
    width:100%;
    height:600px;
  }
</style>

